這篇主題講「Nuxt 如何用 fetch 動態產生頁面內容」

用來補充頁面細部設定

複習一下 Nuxt 收到請求後的處理流程

asyncData 和 fetch實作上是個 Promise Chain，先後執行但兩者功用稍有不同

前一章 asyncData 用來操作 state，收到 page component 的 context 物件，將處理完的最終回傳值寫回 data

通常用於將 SSR 渲染樣板所需的資料，存進 data

這章介紹的 fetch 用來操作 store，收到 nuxt app 的context 物件，將處理完的資料寫回 store

通常用於將 SSR 取得的資料或 nuxt app 當下狀態，寫進 store，供 server/client(browser) 雙方共用

Vuex store 預設值改放在 @store/indxe.js

import Vuex from 'vuex'

const createStore = () => {
  return new Vuex.Store({
    state: () => ({
      result: '未查詢'
    }),
    mutations: {
      setResult (state, { result }) {
        state.result = result;
      }
    }
  })
}

export default createStore

在頁面元件透過 fetch 操作 store

export default {
  fetch ({ store, params }) {
      const result = '報名結果是 ooxx';
      store.commit('setResult', result);
  }
}

示範 - 查詢 theF2E 挑戰賽報名結果

改寫上一章示範 /search-signup-result，先用 async/await

pages/search-signup-result.vue

<template>
    <div>
		<h1>六角報名查詢</h1>
        
        {{ $store.state.result }}<template>
    </div>
</template>

<script>
import axios from 'axios';

export default {

	/* 查詢 hexsholl@test.com 有無報名 theF2E 挑戰賽 */

	async asyncData() {

		let { data } = await axios.post('https://www.thef2e.com/api/isSignUp', {

            "email": "hexscholl@test.com"

        });
        
        store.commit('setResult', data);

	}

}
</script>

Promise 寫法，如下:

/* ... */
	/* 查詢 hexsholl@test.com 有無報名 theF2E 挑戰賽 */
    
    fetch ({ store, params }) {
      return axios.post('https://www.thef2e.com/api/isSignUp', {
          "email": "hexscholl@test.com"
      })
      .then(({ data }) => ({
          store.commit('setResult', data);
      }))
      /* Alternative */
      // .then((res) => {
      // 	store.commit('setResult', res.data);
      // })
  }
}
/* ... */

預覽結果